<HTML>
<HEAD>
<TITLE>JavaScript Source Code 3000:  Page Details:  Mouse Orbit</TITLE>
<META HTTP-EQUIV="JavaScript Source Code 3000" CONTENT = "no-cache">
<META NAME="date" CONTENT="2000-09-09">
<META NAME="channel" CONTENT="Web Developer">
<META NAME="author" CONTENT="Kurt Grigg (kurt.grigg@virgin.net)">
<META NAME="section" CONTENT="Page Details">
<META NAME="description" CONTENT="A series of dots orbit the mouse cursor on the page, giving the appearance of a comet effect.  Awesome!">

<LAYER NAME="a0" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffffff" CLIP="0,0,1,1"></LAYER>
<LAYER NAME="a1" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#fff000" CLIP="0,0,1,1"></LAYER>
<LAYER NAME="a2" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffa000" CLIP="0,0,1,1"></LAYER>
<LAYER NAME="a3" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ff00ff" CLIP="0,0,1,1"></LAYER>
<LAYER NAME="a4" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#00ff00" CLIP="0,0,1,1"></LAYER>
<LAYER NAME="a5" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF00FF" CLIP="0,0,1,1"></LAYER>
<LAYER NAME="a6" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF0000" CLIP="0,0,1,1"></LAYER>
<LAYER NAME="a7" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffffff" CLIP="0,0,2,2"></LAYER>
<LAYER NAME="a8" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#fff000" CLIP="0,0,2,2"></LAYER>
<LAYER NAME="a9" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffa000" CLIP="0,0,2,2"></LAYER>
<LAYER NAME="a10" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ff00ff" CLIP="0,0,2,2"></LAYER>
<LAYER NAME="a11" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#00ff00" CLIP="0,0,2,2"></LAYER>
<LAYER NAME="a12" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#0000ff" CLIP="0,0,2,2"></LAYER>
<LAYER NAME="a13" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF0000" CLIP="0,0,3,3"></LAYER>
<div id="starsDiv" style="position:absolute;top:0px;left:0px">
<div style="position:relative;width:1px;height:1px;background:#ffffff;font-size:1px;visibility:visible"></div>
<div style="position:relative;width:1px;height:1px;background:#fff000;font-size:1px;visibility:visible"></div>
<div style="position:relative;width:1px;height:1px;background:#ffa000;font-size:1px;visibility:visible"></div>
<div style="position:relative;width:1px;height:1px;background:#ff00ff;font-size:1px;visibility:visible"></div>
<div style="position:relative;width:1px;height:1px;background:#00ff00;font-size:1px;visibility:visible"></div>
<div style="position:relative;width:1px;height:1px;background:#0000ff;font-size:1px;visibility:visible"></div>
<div style="position:relative;width:1px;height:1px;background:#FF0000;font-size:1px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background:#ffffff;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background:#fff000;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background:#ffa000;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background:#ff00ff;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background:#00ff00;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background:#0000ff;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:3px;height:3px;background:#FF0000;font-size:3px;visibility:visible"></div>
</div>
</HEAD>

<BODY BGCOLOR="black" vlink=#0000ff text="white">

<BR>
<center>
<table width=600 cellpadding=0 cellspacing=10>
<tr>
<td width=468 align=center>

    
    
</td>
<td width=120 align=center>
    
</td>
</tr>
</table>
<BR>
<BR>
<basefont size=3>
<FONT SIZE="+2" FACE="Helvetica,Arial">
<A HREF="../index.htm" /" TARGET="_top"><FONT COLOR="#0000FF"><b>Home</b></font></A>
<img src="../img/arrow.gif" /img/arrow.gif" height=13 width=7 border=0 alt="}">
<A HREF="index.htm" /page-details/"><font color="#FF0000"><b>Page Details</b></font></A>
<img src="../img/arrow.gif" /img/arrow.gif" height=13 width=7 border=0 alt="}">
<FONT COLOR="#006666"><b>Mouse Orbit</b></font></font>
<BR>
<BR>
<table BORDER=0 WIDTH=486 CELLPADDING=3 CELLSPACING=0>
<tr><td><font FACE="helvetica,arial,geneva" color="white">
<br>
<br>
<!-- Description --><!--content_start-->
A series of dots orbit the mouse cursor on the page, giving the appearance of a comet effect.  Awesome!
<hr>
</td></tr>
</table>
<!-- Demonstration -->
<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Kurt Grigg (kurt.grigg@virgin.net) -->
<!-- Web Site:  http://freespace.virgin.net/kurt.grigg -->




<!-- Begin
var Clrs = new Array(6);
Clrs[0] = 'ff0000';
Clrs[1] = '00ff00';
Clrs[2] = '000aff';
Clrs[3] = 'ff00ff';
Clrs[4] = 'fff000';
Clrs[5] = 'fffff0';
var yBase = 200;
var xBase = 200;
var step;
var currStep = 0;
var Xpos = 1;
var Ypos = 1;
var Xs = 200;
var Ys = 400;
if (document.layers) {
window.captureEvents(Event.MOUSEMOVE);
}
if (document.all) {
function MoveHandler() {
Xpos = document.body.scrollLeft+event.x;
Ypos = document.body.scrollTop+event.y;
}
document.onmousemove = MoveHandler;
}
else if (document.layers) {
function xMoveHandler(evnt) {
Xpos = evnt.pageX;
Ypos = evnt.pageY;
}
window.onMouseMove = xMoveHandler;
}
function Comet() {
if (document.all) {
yBase = window.document.body.offsetHeight / 4;
xBase = window.document.body.offsetWidth / 4;
}
else if (document.layers) {
yBase = window.innerHeight / 4;
xBase = window.innerWidth / 4;
}
if (document.all) {
for ( i = 0 ; i < starsDiv.all.length ; i++ ) {
step = 3;
starsDiv.all[i].style.top = Ypos + yBase*Math.cos((currStep + i*4)/12)*Math.cos(0.7+currStep/200);
starsDiv.all[i].style.left = Xpos + xBase*Math.sin((currStep + i*3)/10)*Math.sin(8.2+currStep/400);
for (ai = 0; ai < Clrs.length; ai++) {
var c=Math.round(Math.random()*[ai]);
}
starsDiv.all[i].style.background = Clrs[c];
   }
}
else if (document.layers) {
for ( j = 0 ; j < 14 ; j++ ) { //number of NS layers!
step = 6;
var templayer = "a"+j;
document.layers[templayer].top = Ypos + yBase*Math.cos((currStep + j*4)/12)*Math.cos(0.7+currStep/200);
document.layers[templayer].left = Xpos + xBase*Math.sin((currStep + j*3)/10)*Math.sin(8.2+currStep/400);
for (aj=0; aj < Clrs.length; aj++)
{
 var c=Math.round(Math.random()*[aj]);
}
document.layers[templayer].bgColor = Clrs[c]; 
   }
}
currStep += step;
setTimeout("Comet()", 5);
}
Comet();
//  End -->
</script>
<P>
<P>
<a name="source">
<table BORDER=0 WIDTH=486 CELLPADDING=3 CELLSPACING=0>
<tr><td BGCOLOR=yellow><font FACE="helvetica,arial,geneva" color="black"><b>JavaScript Source Code 3000:  Page Details:  Mouse Orbit</b>
<p>Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Apple-s).  The script is yours!!!
<br><br></font></td></tr>
<tr><td BGCOLOR=yellow ALIGN=CENTER>
<form NAME="copy">

<DIV align="center">
<input type=button value="Highlight All" onClick="javascript:this.form.txt.focus();this.form.txt.select();">&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT TYPE="text" NAME="total" VALUE="Script Size:  5.33 KB" size=24>
</DIV>

<textarea NAME="txt" ROWS=20 COLS=75 WRAP=VIRTUAL>

&lt;!-- TWO STEPS TO INSTALL MOUSE ORBIT:

  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  --&gt;

&lt;!-- STEP ONE: Paste this code into the HEAD of your HTML document  --&gt;

&lt;HEAD&gt;

&lt;LAYER NAME="a0" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffffff" CLIP="0,0,1,1"&gt;&lt;/LAYER&gt;
&lt;LAYER NAME="a1" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#fff000" CLIP="0,0,1,1"&gt;&lt;/LAYER&gt;
&lt;LAYER NAME="a2" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffa000" CLIP="0,0,1,1"&gt;&lt;/LAYER&gt;
&lt;LAYER NAME="a3" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ff00ff" CLIP="0,0,1,1"&gt;&lt;/LAYER&gt;
&lt;LAYER NAME="a4" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#00ff00" CLIP="0,0,1,1"&gt;&lt;/LAYER&gt;
&lt;LAYER NAME="a5" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF00FF" CLIP="0,0,1,1"&gt;&lt;/LAYER&gt;
&lt;LAYER NAME="a6" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF0000" CLIP="0,0,1,1"&gt;&lt;/LAYER&gt;
&lt;LAYER NAME="a7" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffffff" CLIP="0,0,2,2"&gt;&lt;/LAYER&gt;
&lt;LAYER NAME="a8" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#fff000" CLIP="0,0,2,2"&gt;&lt;/LAYER&gt;
&lt;LAYER NAME="a9" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffa000" CLIP="0,0,2,2"&gt;&lt;/LAYER&gt;
&lt;LAYER NAME="a10" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ff00ff" CLIP="0,0,2,2"&gt;&lt;/LAYER&gt;
&lt;LAYER NAME="a11" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#00ff00" CLIP="0,0,2,2"&gt;&lt;/LAYER&gt;
&lt;LAYER NAME="a12" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#0000ff" CLIP="0,0,2,2"&gt;&lt;/LAYER&gt;
&lt;LAYER NAME="a13" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF0000" CLIP="0,0,3,3"&gt;&lt;/LAYER&gt;
&lt;div id="starsDiv" style="position:absolute;top:0px;left:0px"&gt;
&lt;div style="position:relative;width:1px;height:1px;background:#ffffff;font-size:1px;visibility:visible"&gt;&lt;/div&gt;
&lt;div style="position:relative;width:1px;height:1px;background:#fff000;font-size:1px;visibility:visible"&gt;&lt;/div&gt;
&lt;div style="position:relative;width:1px;height:1px;background:#ffa000;font-size:1px;visibility:visible"&gt;&lt;/div&gt;
&lt;div style="position:relative;width:1px;height:1px;background:#ff00ff;font-size:1px;visibility:visible"&gt;&lt;/div&gt;
&lt;div style="position:relative;width:1px;height:1px;background:#00ff00;font-size:1px;visibility:visible"&gt;&lt;/div&gt;
&lt;div style="position:relative;width:1px;height:1px;background:#0000ff;font-size:1px;visibility:visible"&gt;&lt;/div&gt;
&lt;div style="position:relative;width:1px;height:1px;background:#FF0000;font-size:1px;visibility:visible"&gt;&lt;/div&gt;
&lt;div style="position:relative;width:2px;height:2px;background:#ffffff;font-size:2px;visibility:visible"&gt;&lt;/div&gt;
&lt;div style="position:relative;width:2px;height:2px;background:#fff000;font-size:2px;visibility:visible"&gt;&lt;/div&gt;
&lt;div style="position:relative;width:2px;height:2px;background:#ffa000;font-size:2px;visibility:visible"&gt;&lt;/div&gt;
&lt;div style="position:relative;width:2px;height:2px;background:#ff00ff;font-size:2px;visibility:visible"&gt;&lt;/div&gt;
&lt;div style="position:relative;width:2px;height:2px;background:#00ff00;font-size:2px;visibility:visible"&gt;&lt;/div&gt;
&lt;div style="position:relative;width:2px;height:2px;background:#0000ff;font-size:2px;visibility:visible"&gt;&lt;/div&gt;
&lt;div style="position:relative;width:3px;height:3px;background:#FF0000;font-size:3px;visibility:visible"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/HEAD&gt;

&lt;!-- STEP TWO: Copy this code into the BODY of your HTML document  --&gt;

&lt;BODY&gt;

&lt;SCRIPT LANGUAGE="JavaScript"&gt;
&lt;!-- Original:  Kurt Grigg (kurt.grigg@virgin.net) --&gt;
&lt;!-- Web Site:  http://freespace.virgin.net/kurt.grigg --&gt;

&lt;! &gt;
&lt;! &gt;

&lt;!-- Begin
var Clrs = new Array(6);
Clrs[0] = 'ff0000';
Clrs[1] = '00ff00';
Clrs[2] = '000aff';
Clrs[3] = 'ff00ff';
Clrs[4] = 'fff000';
Clrs[5] = 'fffff0';
var yBase = 200;
var xBase = 200;
var step;
var currStep = 0;
var Xpos = 1;
var Ypos = 1;
var Xs = 200;
var Ys = 400;
if (document.layers) {
window.captureEvents(Event.MOUSEMOVE);
}
if (document.all) {
function MoveHandler() {
Xpos = document.body.scrollLeft+event.x;
Ypos = document.body.scrollTop+event.y;
}
document.onmousemove = MoveHandler;
}
else if (document.layers) {
function xMoveHandler(evnt) {
Xpos = evnt.pageX;
Ypos = evnt.pageY;
}
window.onMouseMove = xMoveHandler;
}
function Comet() {
if (document.all) {
yBase = window.document.body.offsetHeight / 4;
xBase = window.document.body.offsetWidth / 4;
}
else if (document.layers) {
yBase = window.innerHeight / 4;
xBase = window.innerWidth / 4;
}
if (document.all) {
for ( i = 0 ; i &lt; starsDiv.all.length ; i++ ) {
step = 3;
starsDiv.all[i].style.top = Ypos + yBase*Math.cos((currStep + i*4)/12)*Math.cos(0.7+currStep/200);
starsDiv.all[i].style.left = Xpos + xBase*Math.sin((currStep + i*3)/10)*Math.sin(8.2+currStep/400);
for (ai = 0; ai &lt; Clrs.length; ai++) {
var c=Math.round(Math.random()*[ai]);
}
starsDiv.all[i].style.background = Clrs[c];
   }
}
else if (document.layers) {
for ( j = 0 ; j &lt; 14 ; j++ ) { //number of NS layers!
step = 6;
var templayer = "a"+j;
document.layers[templayer].top = Ypos + yBase*Math.cos((currStep + j*4)/12)*Math.cos(0.7+currStep/200);
document.layers[templayer].left = Xpos + xBase*Math.sin((currStep + j*3)/10)*Math.sin(8.2+currStep/400);
for (aj=0; aj &lt; Clrs.length; aj++)
{
 var c=Math.round(Math.random()*[aj]);
}
document.layers[templayer].bgColor = Clrs[c]; 
   }
}
currStep += step;
setTimeout("Comet()", 5);
}
Comet();
//  End --&gt;
&lt;/script&gt;

 

&lt;!-- Script Size:  5.33 KB --&gt;</textarea><br><font FACE="helvetica,arial,geneva"></font></td></tr>

</table>
</form>
</FONT>
</CENTER>


</center>
</body></html>


